import React, { useState } from 'react'
import logo from './logo.svg'
import { Table, Button, ConfigProvider } from 'antd'

import { useTranslation } from 'react-i18next'

// 引入antd中内置的语言包
import zhCN from 'antd/lib/locale/zh_CN'
import enUS from 'antd/lib/locale/en_US'

import './App.css'
function App() {
  const [lang, setLang] = useState('zh')
  const { t, i18n } = useTranslation(['app'])

  const columns = [
    {
      title: t('index'),
      dataIndex: 'index',
    },
    {
      title: t('name'),
      dataIndex: 'name',
    },
    {
      title: t('age'),
      dataIndex: 'age',
    },
    {
      title: t('info'),
      dataIndex: 'info',
    },
  ]

  const data = [
    {
      index: 1,
      name: '海静',
      age: 18,
      info: '老色批',
    },
    {
      index: 2,
      name: '老陶',
      age: 20,
      info: '老色批,弹棉花',
    },
  ]
  return (
    <ConfigProvider locale={lang === 'zh' ? zhCN : enUS}>
      <button
        onClick={() => {
          i18n.changeLanguage('zh')
          setLang('zh')
        }}
      >
        中文
      </button>
      <button
        onClick={() => {
          i18n.changeLanguage('en')
          setLang('en')
        }}
      >
        english
      </button>
      <hr />
      <div>{t('app.halo')}</div>
      <p>{t('app.hhh')}</p>
      <Button type="primary">{t('click')}</Button>
      <Table
        columns={columns}
        dataSource={data}
        rowKey="index"
        pagination={{
          total: 50,
          showSizeChanger: true,
        }}
      ></Table>
    </ConfigProvider>
  )
}

export default App
